<template>
  <CjuiEchart :loading="false" :noData="false" :options="chartOption" class="h-490px" />
</template>

<script lang="ts" setup>
import { useThemeColorVars } from '@/components/cjui/Echart/index'

const { colorVars } = useThemeColorVars()

const chartOption = {
  visualMap: {
    max: 100,
    range: [1, 100],
  },
  geo: [
    // 地图层
    {
      map: 'china',
      zlevel: 1,
      z: 3,
    },
    // 纯色层
    {
      map: 'china',
      center: [105.37, 36.3],
      zlevel: 1,
      z: 2,
      itemStyle: {
        areaColor: colorVars.value.mapAreaSoildColor,
        borderColor: colorVars.value.mapAreaSoildColor,
      },
      regions: [
        {
          name: '南海诸岛',
          itemStyle: {
            opacity: 0
          }
        }
      ]
    },
    // 阴影层
    {
      map: 'china',
      center: [105.37, 36.3],
      zlevel: 1,
      z: 1,
      itemStyle: {
        shadowColor: colorVars.value.mapAreaSoildShadow,
        shadowBlur: 4,
        shadowOffsetX: 4,
        shadowOffsetY: 4
      },
      regions: [
        {
          name: '南海诸岛',
          itemStyle: {
            opacity: 0
          }
        }
      ]
    }
  ],
  series: [
    {
      name: '地图数据项1',
      type: 'map',
      map: 'china',
      zlevel: 2,
      data: [
        { name: '青海', value: 12 },
        { name: '西藏', value: 33 },
        { name: '四川', value: 54 },
        { name: '北京', value: 100 },
      ]
    },
  ],
}
</script>
